import { Select, SelectProps } from 'antd';
import React, { useMemo } from 'react';

import { SvgIcon } from '@/components/icon';
import MyTooltip from '@/components/tooltip';
import { useRouter } from '@/router/hooks';
import { useSystemStore } from '@/store/useSystemStore';
import { getFilenameFromPath } from '@/utils/common';

type Props = SelectProps & {
  disableTip?: string;
};

const AIModelSelector = ({ options = [], onChange, disableTip, value, ...props }: Props) => {
  const { llmModelList, vectorModelList } = useSystemStore();
  const router = useRouter();

  const avatarList = options.map((item) => {
    const modelData =
      llmModelList.find((model) => model.model === item.value) ||
      vectorModelList.find((model) => model.model === item.value);

    return {
      value: item.value,
      label: (
        <div className="flex items-center py-1">
          <SvgIcon
            className="mr-2"
            size="24"
            icon={getFilenameFromPath(modelData?.avatar!).replace('.svg', '')}
          />
          <div>{item.label}</div>
          {modelData?.isConnect ? null : <div className="ml-auto text-xs text-error">失效</div>}
        </div>
      ),
    };
  });

  const expandList = useMemo(() => {
    return avatarList;
  }, [avatarList]);

  const onSelect = (e: string) => {
    if (e === 'price') {
      router.push('/price#point-card');
      return;
    }
    onChange && onChange(e);
  };

  return (
    <MyTooltip title={disableTip}>
      <Select
        value={value}
        className="nodrag w-full"
        disabled={!!disableTip}
        options={expandList}
        {...props}
        onChange={onSelect}
      />
    </MyTooltip>
  );
};

export default AIModelSelector;
